<template>
  <div class="wrapper">
    <!--    header部分-->
    <header>
      <p>用户注册</p>
    </header>
    <!--        表单部分-->
    <ul class="form-box">
      <li>
        <div class="title">
          手机号码：
        </div>
        <div class="content">
          <input type="text" placeholder="手机号码" v-model="user.userId">
        </div>
      </li>
      <li>
        <div class="title">
          用户名称：
        </div>
        <div class="content">
          <input type="text" v-model="user.userName" placeholder="用户名称">
        </div>
      </li>
      <li>
        <div class="title">
          密码：
        </div>
        <div class="content">
          <input type="password" placeholder="密码" v-model="user.password">
        </div>
      </li>
      <li>
        <div class="title">
          确认密码：
        </div>
        <div class="content">
          <input type="password" placeholder="确认密码" v-model="checkPassword">
        </div>
      </li>
      <li>
        <div class="title">
          性别：
        </div>
        <div class="content" style="font-size: 3vw">
          <input type="radio" name="sex"  :value="1" v-model="user.userSex" style="width:6vw ;height:3.2vw ">男
          <input type="radio" name="sex" :value="0" v-model="user.userSex" style="width:6vw ;height:3.2vw ">女
        </div>
      </li>
    </ul>

    <div class="button-register" >
      <button @click="registerUser">注册</button>

    </div>


    <!--    底部菜单部分-->
    <Footer/>
  </div>
</template>

<script>
import Footer from "./item/Footer.vue";
import router from "../router/router.js";
import {reactive, ref,getCurrentInstance} from "vue";
import axios from "axios";
import { ElMessage } from 'element-plus'

export default {
  name: "Register",
  components: {Footer},
  mounted() {

  },

  setup(){

    let internalInstance = getCurrentInstance();

    let message=internalInstance.appContext.config.globalProperties.$message

    let user=reactive({
        userId:"",
        userName:"",
        password:"",
        userSex:1
    })
    let checkPassword=ref("")
    let showSuccessMessage=ref(false)

    function registerUser(){
      if (user.userId == '') {
        message.warning("手机号不能为空！")
        return;
      }
      if (user.userName == '') {
        message.warning("用户名不能为空！")
        return;
      }
      if (user.password == '') {
        message.warning('密码不能为空！');
        return;
      }
      if (user.password != checkPassword.value) {
        message.warning('两次输入的密码不一致！');
        return;
      }

      axios({
        method:"POST",
        url:"/user/saveUser",
        data: JSON.stringify(user), // 将JavaScript对象转化为JSON字符串
        headers: {
          "Content-Type": "application/json" // 设置请求头，指定发送的数据是JSON格式
        }
      }).then( function (response){
        console.log(response)
        message.success("注册成功！")
        router.push({
          path:'/login'
        })
      }).catch(function (error){
        console.log(error)
        message.error("注册失败,账户已存在！")
      })

    }
    return{
      user,
      checkPassword,
      showSuccessMessage,
      registerUser
    }

  }
}
</script>

<style scoped>
/*总容器*/
.wrapper{
  width: 100%;
  height: 100%;
}
/*header部分*/
.wrapper header{
  width:100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;

  display: flex;
  justify-content: center;
  align-items: center;

}
/*表单部分*/
.wrapper .form-box{
  width: 100%;
  margin-top: 12vw;
}

.wrapper .form-box li{
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
}
.wrapper .form-box li .title{
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;

}
.wrapper .form-box li .content{
  flex: 1;
}
.wrapper .form-box li  .content input{
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}
.wrapper .button-login{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}
.wrapper .button-login button{
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background-color: #38CA73;
  border-radius: 4px;

  border: none;
  outline: none;
}
.wrapper .button-register{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}
.wrapper .button-register button{
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #666;
  background-color: #EEE;
  border-radius: 4px;

  border: none;
  outline: none;
  border: solid 1px #DDD;
}
/*底部菜单部分*/
.wrapper .footer{
  width: 100%;
  height: 14vw;
  border-top: #DDD;


  background-color: white;
  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .footer li{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}
.wrapper .footer li p{
  font-size: 2.8vw;

}
.wrapper .footer li i{
  font-size: 5vw;
}
</style>